<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#box{
			width:900px;
			height:600px;
			border:1px solid #ccc;
			position:absolute;
			top:20px;
			left:20px;
		}
		#ban{
			width:180px;
			height:10px;
			background-color:#189;
			border-radius:3px;
			position:absolute;
			left:360px;
			bottom:0px;
		}
		#ball{
			width: 20px;
			height: 20px;
			background: #333;
			position: absolute;
			left:440px;
			bottom: 10px;
			border-radius: 50%;
		}
		#k{
			width:100%;
			
		}
		.thek{
			width:148px;
			height:38px;
			background:#1dd;
			border-radius:5px;
			float:left;
			margin:2px 1px 0;
			position:absolute;
		}
		#xian{
			width:200px;
			height:600px;
			border:1px solid #ccc;
			position:absolute;
			top:20px;
			left:950px;
			background-color:#eee;
			border-radius:20px 20px 0 0;
		}
		#time{
			width:200px;
			height:210px;
			margin:0 auto 0;
			color:white;
		}
		#ttop{
			width:200px;
			height:60px;
			border-radius:20px 20px 0 0;
			background-color:#1dd;
			text-align:center;
			font-size:18px;
			line-height:60px;
		}
		#m{
			width:200px;
			height:150px;
			border-radius: 0 0 20px 20px;
			background-color:#dad;
			text-align:center;
			font-size:40px;
			line-height:150px;
			position:relative;
		}
		#sp{
			position:absolute;
			display:block;
			width:200px;
			height:75px;
			background-color:#333;
			opacity:0.1;
			top:0;
		}
		h2{
			line-height:60px;
			padding-left:30px;
			border-bottom:1px solid #ccc;
		}
		#ts{
			padding:10px;
			line-height:30px;
			border-bottom:1px solid #ccc;
		}
		#ts2,#ts3{
			padding:10px;
			line-height:30px;
		}
		#over{
			text-align:center;
			font-size:40px;
			width:450px;
			line-height:170px;
			border:25px solid #9bd;
			color:#fff;
			background-color:#4dd;
			position:absolute;
			top:200px;
			left:200px;
			display:none;
		}
	</style>
	<body>
		<div id="box">
			<div id="k"></div>
			<div id="ball"></div>
			<div id="ban"></div>
			<div id="over"></div>
		</div>
		<div id="xian">
			<div id="time">
				<div id="ttop">00</div>
				<div id="m"><div id="main">00</div> <span id="sp"></span></div>
			</div>
			<h2>游戏信息</h2>
			<div id="ts">回车开始游戏<br>左右键控制挡板</div>
			<div id="ts2">挡板挡球数</div>
			<div id="ts3">0</div>
		</div>
		</div>
	</body>
</html>
<script>
	function $(id){
		return document.getElementById(id);
	}
	/**/
	var arr=["red","#1da","#8ac","#4cd","orange","#639","#c24"];
	for(var i=0;i<24;i++){
		var mc=parseInt(Math.random()*7);
		var thek=document.createElement("div");
		thek.style.background=arr[mc];
		thek.className="thek";
		$("k").appendChild(thek);
	}
	var qiang=document.getElementsByClassName("thek");
	for(var i=0;i<4;i++){
		for(var j=0;j<6;j++){
			qiang[i*6+j].style.top=i*40+"px";
			qiang[i*6+j].style.left=j*150+"px";
			/*console.log(i+"--"+j)*/
		}
	}
	/**/
	var speedX = 3;
	var speedY = -3;
	var timer = null;
	var banlr=$("ban").offsetLeft;
	var dq=0;
	var fleg=false;
	var fl=false;
	var ther=null;
	var num=qiang.length;
	document.onkeydown = function(eve){
		var e=eve || event;
		if(e.keyCode==13){
			clearInterval(timer);
			fl=true;
			if(fleg){
				location.reload();//刷新网页
				fleg=false;
				return;
			}
			timer = setInterval(function(){
				$("ball").style.left  = $("ball").offsetLeft +speedX +"px";
				$("ball").style.top  = $("ball").offsetTop +speedY +"px";
				
				if( $("ball").offsetLeft <= 0  ){
					$("ball").style.left = 0;
					speedX *= -1;
				}else if( $("ball").offsetLeft >= $("box").offsetWidth- $("ball").offsetWidth ){
					$("ball").style.left =$("box").offsetWidth - $("ball").offsetWidth +  "px";
					speedX *= -1;
				}
				for(let i=0;i<24;i++){
					if($("ball").offsetTop <= qiang[i].offsetHeight+qiang[i].offsetTop){
						if($("ball").offsetLeft >= qiang[i].offsetLeft && $("ball").offsetLeft <= qiang[i].offsetWidth+qiang[i].offsetLeft){
							qiang[i].style["display"]="none";
							num--;
							speedY *= -1;
							if(num==0){
								fleg=true;
								fl=false;
								clearInterval(timer);
								$("over").style.display="block";
								$("over").innerHTML="You Win!";
							}
						}
					}
					
				}
				if( $("ball").offsetTop <= 0 ){
					$("ball").style.top = 0;
					speedY *= -1;
				}
				if( $("ball").offsetTop >=$("box").offsetHeight- $("ball").offsetHeight- $("ban").offsetHeight){
					if($("ball").offsetLeft>=$("ban").offsetLeft && $("ball").offsetLeft<=$("ban").offsetLeft+$("ban").offsetWidth){//判断挡板
						if($("ball").offsetLeft>=$("ban").offsetLeft+($("ban").offsetWidth/3*2)){
							speedX = speedX>0 ? 2 : -4;
						}else if($("ball").offsetLeft<=$("ban").offsetLeft+($("ban").offsetWidth/3)){
							speedX = speedX>0 ? 2 : -4;
						}
						$("ball").style.top =$("box").offsetHeight - $("ball").offsetHeight- $("ban").offsetHeight +  "px";
						speedY *= -1;
						dq++;
						$("ts3").innerHTML=dq;
					}else{
						if($("ball").offsetTop>=$("box").offsetHeight- $("ball").offsetHeight){
							fleg=true;
							clearInterval(timer);
							$("ball").style.top = $("box").offsetHeight- $("ball").offsetHeight;
							fl=false;
							$("over").style.display="block";
							$("over").innerHTML="Game Over";
						}
					}
				}
				
			},10)
		}
		else if(e.keyCode==37){
			clearInterval(ther);
			if(fleg){
				return;
			}
			function theLeft(){
				
				banlr-=2;
				if(banlr<=0){
					banlr=0;
				}
				$("ban").style.left=banlr+"px";
			}
			if(fl){
				ther=setInterval(theLeft,3);
			}
		}
		else if(e.keyCode==39){
			clearInterval(ther);
			if(fleg){
				return;
			}
			function theRight(){
				
				banlr+=2;
			if(banlr>=$("box").offsetWidth-$("ban").offsetWidth){
				banlr=$("box").offsetWidth-$("ban").offsetWidth;
			}
			$("ban").style.left=banlr+"px";
			}
			if(fl){
				ther=setInterval(theRight,3);
			}
		}
	}
	document.onkeyup = function(){
		clearInterval(ther);
	}
	/**/
	function nowDate(){
		var now=new Date();
		var ttop=document.getElementById("ttop");
		var main=document.getElementById("main");
		var h=now.getHours()<10 ? "0"+now.getHours() : now.getHours();
		var m=now.getMinutes()<10 ? "0"+now.getMinutes() : now.getMinutes();
		var s=now.getSeconds()<10 ? "0"+now.getSeconds() : now.getSeconds();
		var arr=["星期日","星期一","星期二","星期三","星期四日","星期五","星期六"]
		ttop.innerHTML=now.getFullYear()+"."+(now.getMonth()+1)+"."+now.getDate()+":"+arr[now.getDay()];
		main.innerHTML=h+":"+m+":"+s;
		
	}
	nowDate();
	setInterval(nowDate , 1000);
</script>
